<template>
  <div class="wrapper">
    <el-row :gutter="10">
      <el-col :xs="22" :lg="22" :offset="2">
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          v-on:editComments="pushbreads"
          v-if="bread.length>1"
        >
          <el-breadcrumb-item v-for="(item,index) in bread" :key="index" :to="{path:item.path}">
            <span>{{item.name}}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col :xs="22" :lg="22" :offset="2" class="header_button" v-if="isClassDetail">
        <el-button type="primary" @click="linkto">
          <i class="iconfont">&#xe677;</i> 学习课程
        </el-button>
        <el-button type="primary" @click="editCommets(classDetail,bread,nope)">
          <i class="iconfont">&#xe7e3;</i> 撰写课评
        </el-button>
        <el-button type="primary" @click="saveas">
          <i class="iconfont">&#xe7df;</i> 收藏课程
        </el-button>
      </el-col>
      <router-view></router-view>
    </el-row>
  </div>
</template>

<script>
import {
  getCourseDetail,
  getCourseComment,
  paintbread,
  saveCollect
} from "@/api/ajax";
export default {
  name: "classEdit",
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.paint(from);
    });
  },
  data() {
    return {
      classData: {},
      id: "",
      checkmore: false,
      nope: [],
      max: 10,
      bread: [
        {
          path: "/",
          name: "首页"
        }
      ],
      classDetail: {},
      comments: {
        num: "123",
        rows: [],
        total: 10,
        pagesize: 10,
        default: [],
        currentpage: 1
      }
    };
  },
  components: {},
  methods: {
    paint(from) {
     
      if (
        from.name == "PersonalCenter" &&
        !this.$route.path.includes(`editComments`)
      ) {
        this.id = this.$route.query.id;
        getCourseDetail(this.id).then(res => {
          this.classDetail = res.data.data;
          if (this.bread.length > 1) {
            this.bread.pop();
          } else {
            this.bread = JSON.parse(this.$route.query.breads);
            this.bread.push({
              path: `classDetail?id=${this.id}`,
              name: this.classDetail.title
            });
          }
        });
        getCourseComment(this.id).then(res => {
          this.comments.rows = res.data.data.rows;
          this.comments.total = res.data.data.total;
          this.comments.default = _.take(this.comments.rows, 2);
        });
      } else if (this.$route.path.includes(`editComments`)) {
      } else if (this.$route.path.includes(`classDetail`)) {
        this.id = this.$route.query.id;
        getCourseDetail(this.id).then(res => {
          this.classDetail = res.data.data;
          if (this.bread.length > 1) {
            this.bread.pop();
          } else {
            this.bread.push({
              path: `classDetail?id=${this.id}`,
              name: this.classDetail.title
            });
          }
        });
        getCourseComment(this.id).then(res => {
          this.comments.rows = res.data.data.rows;
          this.comments.total = res.data.data.total;
          this.comments.default = _.take(this.comments.rows, 2);
        });
      }
    },
    pushbreads(v) {
      console.log(v);
    },
    linkto() {
      window.open("https://www.baidu.com", "_blank");
    },
    saveas() {
      var params = { action: 1 };
      saveCollect(this.id, params).then(res => {
        console.log(res);
      });
      this.$message({
        message: "成功添加至个人收藏",
        type: "success"
      });
    },
    editCommets(classDetail) {
      this.bread.push({
        path: "editComments",
        name: "发表课评"
      });
      this.$router.push({
        name: "editComments",
        query: { id: this.id }
      });
    },
    handleCurrentChange() {},
    navToDetail(v) {
      if (this.bread.length == 0) {
        this.$router.push({
          name: "comments",
          params: {
            item: JSON.stringify(v),
            nope: JSON.stringify(this.nope)
          }
        });
      } else {
        this.$router.push({
          name: "comments",
          params: {
            item: JSON.stringify(v),
            bread: JSON.stringify(this.bread)
          }
        });
      }
    }
  },
  computed: {
    isClassDetail: function() {
      if (this.$route.path.includes("classDetail")) {
        return true;
      } else {
        return false;
      }
    }
  },
  watch: {
    $route: {
      handler(curVal, oldVal) {
        this.paint();
      },
      deep: true
    }
  },
  created() {
    var self = this;
    this.$bus.$on("pushItem", function(v) {
      self.bread.push({
        path: "comments",
        name: v
      });
    });
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  background: white;
  z-index: 100;
  margin-bottom: 100px;
  .header_button {
    margin-top: 30px;
  }
  .class_info {
    padding: 40px 0;
    display: flex;
    align-items: flex-start;
    & > div {
      display: inline-block;
    }
    .class_title_img {
      width: 200px;
      height: 200px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .class_info_content {
      margin: 0 60px;
      & div {
        margin: 20px 0;
        &:hover {
          color: orange;
          cursor: pointer;
        }
      }
    }
  }
  .nickName {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .adduser {
    font-size: 25px;
    cursor: pointer;
    position: absolute;
    bottom: 7px;
    margin-left: 10px;
    &:hover {
      color: orange;
    }
  }
  .intersection {
    width: 20%;
    float: right;
    display: flex;
    & span {
      display: inline-block;
      width: 33%;
      cursor: pointer;
      &:hover {
        color: #409eff;
      }
    }
  }
}
</style>
